<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>Planar Game</title>
  
<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="../../lib/yui/dragdrop/dragdrop-min.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../../build/wireit-min.js"></script>

<script type="text/javascript" src="planarGame.js"></script>

<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />

<style>

div.bubble {
	width: 32px;
	height: 32px;
	position: relative;
	z-index: 5;
	cursor: move;
	background-image: url(bb-blue.png);
}

div.redBubble {
	background-image: url(bb-red.png);
}

div.bubble:hover {
	background-image: url(bb-white.png);
}

div.bubble div.WireIt-Terminal {
	position: absolute;
	background-image: none;
}

#aboutFrame {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 240px;
	background-color: #ffd75e;
	border: 5px solid black;
	padding: 10px;
}

#aboutFrame p#title {
	font-size: 18pt;
	font-weight: bold;
}

#aboutFrame p#level {
font-size: 18pt;
font-weight: bold;
}

#footer {
	margin-top: 10px;
	text-align: center;
}

</style>
 </head>
 <body>
	
	<div id='aboutFrame'>
		<p id="title">Planar Game</p>
		<p>Inspired by <a href="http://www.planarity.net/" target="_new">Planarity</a>, made as an example for the <a href="../../index.html" target="_new">WireIt library</a>.</p>
		
		<p><b>Instructions:</b></p>
		<p>Arrange the vertices such that no edges overlap.<br />
			<br />Click on the <i>"Check"</i> button when you are done.</p>
		<p id='level'>Level <span id='levelContainer'>1</span></p>
		<button id="checkButton">Check !</button>
		
		<div id="footer">Made by <a href="http://www.neyric.com/" target="_new">Eric Abouaf</a></div>
		
	</div>
 </body>
</html>